<template>
  <div class="common-nav">
    <div v-if="needLeft" class="common-nav__left"></div>
    <div class="common-nav__content">
      <div v-if="!collapse" class="common-nav__inner">
        <div
          v-for="(item, index) in options"
          :key="index"
          :class="[modelValue === item.id && 'is-active']"
          class="common-nav__item"
          @tap="onSelect(item.id)"
        >
          <span>{{ item.name }}</span>
          <span v-show="modelValue === item.id" class="common-nav__item-line" />
        </div>
      </div>
    </div>
    <div v-if="needRight" class="common-nav__right">
      <div class="common-nav__right-line"></div>
      <div class="common-nav__right-content">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "common-nav",
});

export type CommmonNavProps = {
  needLeft?: boolean;
  needRight?: boolean;
  modelValue: number | string | null;
  options: any[];
  collapse: boolean;
};

const props = withDefaults(defineProps<CommmonNavProps>(), {
  needLeft: false,
  needRight: false,
  options: () => [],
});

const emits = defineEmits(["update:modelValue", "change"]);

const onSelect = (value: number | string) => {
  // console.log("select", value, "props.modelValue", props.modelValue);
  if (props.modelValue !== value) {
    emits("update:modelValue", value);
    emits("change", value);
  }
};
</script>

<style lang="less">
.common-nav {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  &__content {
    flex: 1;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    height: 60px;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  &__inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }

  &__item {
    position: relative;
    white-space: nowrap;
    font-weight: 400;
    font-size: 26px;
    color: #000000;
    line-height: 34px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    &-line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 0);
      width: 32px;
      height: 8px;
      background: #60b89b;
      border-radius: 4px;
    }
    &.is-active {
      font-weight: bold;
      color: #60b89b;
    }
  }

  &__right {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 60px;

    &-content {
      position: absolute;
      left: 0;
      top: 0;
      background-color: white;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }
    &-line {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      height: calc(100% - 10px);
      width: 5px;
      box-shadow: -5px 0 10px 0 rgba(125, 125, 125, 0.5);
      z-index: 1;
    }
  }
}
</style>
